<template lang="html">
	<div :class="$style.view"> 
		<MBanner :options="options" :items="mBanners"/>
		<MNPanel :cname="$style.panel" title="男频推荐">
			<span :class="$style.btnBox" @click.stop="clickRefresh('male')">
				<svg :class="$style.refreshIcon" aria-hidden="true">
			    <use xlink:href="#icon-refresh"></use>
				</svg>
				<Btn :cname="$style.btnClass">换一换</Btn>
			</span>
			<div :class="$style.list">
				<router-link tag="div" :class="$style.bookBox" v-for="(item,index) in maleBooks" :key="index" :to="{name:'bookdetial',query:{bookId:item._id}}">
					<img :class="$style.bookImg" :src="item.cover" alt="">
					<p :class="$style.bookTitle">{{item.title}}</p>
				</router-link>
			</div>
		</MNPanel>
		<MNPanel :cname="$style.panel" title="女生最爱">
			<span :class="$style.btnBox" @click.stop="clickRefresh('female')">
				<svg :class="$style.refreshIcon" aria-hidden="true">
			    <use xlink:href="#icon-refresh"></use>
				</svg>
				<Btn :cname="$style.btnClass">换一换</Btn>
			</span>
			<div :class="$style.list">
				<router-link tag="div" :class="$style.bookBox" v-for="(item,index) in femaleBooks" :key="index" :to="{name:'bookdetial',query:{bookId:item._id}}">
					<img :class="$style.bookImg" :src="item.cover" alt="">
					<p :class="$style.bookTitle">{{item.title}}</p>
				</router-link>
			</div>
			<div v-if="femaleBooks.length" :class="$style.more" @click.stop="changeNav(3)">
				更多好书
				<svg :class="$style.moreIcon" aria-hidden="true">
			    <use xlink:href="#icon-more"></use>
				</svg>
			</div>
		</MNPanel>
		<MNPanel :cname="$style.panel" title="热门书单">
			<span :class="$style.btnBox" @click.stop="clickRefresh('default')">
				<svg :class="$style.refreshIcon" aria-hidden="true">
			    <use xlink:href="#icon-refresh"></use>
				</svg>
				<Btn :cname="$style.btnClass">换一换</Btn>
			</span>
			
		</MNPanel>
		<Footer/>
	</div>
</template>
<script>
	import MBanner from '../core/slider';
	import MNPanel from '../core/panel';
	import Footer from '../public/footer';
	import Btn from '../core/btn';
	export default {
		name: 'mview',
		data() {
			return {
				options: {
					autoplay: true,
					loop: true,
					direction: 'horizontal',
          slidesPerView: 1,
          spaceBetween: 30,
          mousewheel: true,
          pagination: {
              el: '.swiper-pagination',
            }
				},
				mBanners: [
					{ href:'mview',img:'http://img.17k.com/cmsimg/recommend/2017/11/1510538578.9364.jpg'},
	        { href:'mview',img:'http://img.17k.com/cmsimg/recommend/2018/05/1526818860.4069.jpg'},
	        { href:'mview',img:'http://img.17k.com/cmsimg/recommend/2018/04/1523200591.4495.jpg'}
				],
				tipBooks: [
					{img:'http://img.17k.com/cmsimg/recommend/2018/04/1523200591.4495.jpg',title:'测试'},
					{img:'http://img.17k.com/cmsimg/recommend/2018/04/1523200591.4495.jpg',title:'测试'},
					{img:'http://img.17k.com/cmsimg/recommend/2018/04/1523200591.4495.jpg',title:'测试'},
				],
				maleBooks: [],
				femaleBooks: [],
				hotBookList: [],
				AjorBooksUrlValue: new Map(),//临时存储
			}
		},
		components: {
			MBanner,
			MNPanel,
			Btn,
			Footer
		},
		computed: {
			nav_params() {
				return this.$route.query.nav_params;
			},
		},
		mounted() {
			this._getAjorBooksHot('male','玄幻',5,this.maleBooks);
			this._getAjorBooksHot('female','纯爱',5,this.femaleBooks);
		},
		methods: {
			/*获取某分类下的热门书籍*/
			_getAjorBooksHot(main,major,limit,params) {
				let url = `http://novel.juhe.im/category-info?gender=${main}&type=hot&major=${major}&minor=&start=0&limit=${limit}`;
				if (this.AjorBooksUrlValue.has(url)) {
					this.AjorBooksUrlValue.get(url).map(value=>{
						params.push(value);
					});
					return;
				}
				else {
					this.$axios.get(url)
					.then((response)=>{
						if (response.data.books.length > limit+1) {
							response.data.books = response.data.books.slice(0,limit+1);
						}
						response.data.books.map(value=>{
							//先拼接地址
							value.cover = this.CommonHelper.addressSplicing(value.cover,'http://statics.zhuishushenqi.com');
							value.cover = this.CommonHelper.transcodeCover(value.cover);
							params.push(value);
						});
						this.AjorBooksUrlValue.set(url,params);
					}).catch((error)=>{
						console.log(error);
					});
				}
			},
			/*获取热门书单*/
			_getHotBookLists(start=0,params) {
				let url = `http://api.zhuishushenqi.com/book-list?sort=collectorCount&duration=last-seven-days&start=${start}`;
				/*this.$axios.get(url)
				.then((response)=>{
					params = [];
					response.data.books.map(value=>{
						//先拼接地址
						value.cover = Common.addressSplicing(value.cover,'http://statics.zhuishushenqi.com');
						value.cover = Common.transcodeUrl(value.cover);
						params.push(value);
					});
				}).catch((error)=>{
					console.log(error);
				});*/
			},
			/*点击刷新*/
			clickRefresh(params) {
				if (params==='male') {
					let major = this.$store.state.main_cates['male'][Math.floor(Math.random()*this.$store.state.main_cates['male'].length)].name;
					this._getAjorBooksHot(params,major,5,this.maleBooks=[]);
				}
				if (params==='female') {
					let major = this.$store.state.main_cates['female'][Math.floor(Math.random()*this.$store.state.main_cates['female'].length)].name;
					this._getAjorBooksHot(params,major,5,this.femaleBooks=[]);
				}
				if (params==='default') {
					//this._getHotBookLists(start,this.hotBookList);
					console.log('test');
				}
			},
			/*其他nav入口*/
			changeNav(params) {
				if (params) {
					//路由跳转而已
					this.$router.push({name:'mview',query:{params:params}});
				}
			}
		}
	}
</script>
<style lang="scss" module>
	.view {
		width: 100%;
		margin-top: 200px;
		margin-bottom: 120px;
		box-sizing: border-box;
		.panel {
			min-height: 460px;
			.btnBox {
				position: absolute;
				right: 0;
				text-align: right;
				box-sizing: border-box;
				.refreshIcon {
					width: 24px;
					height: 24px;
					color: #efefef;
				}
				.btnClass {
					font-size: 30px;
					background-color: #efefef;
					border: none;
				}
			}
			.list {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				padding-top: 32px;
				padding-left: 32px;
				padding-right: 32px;
				background-color: #f5f5f5;
				.bookBox {
					width: 208px;
					margin-bottom: 10px;
					box-sizing: border-box;
					.bookImg {
						width: 100%;
						height: 270px;
						background: #eee;
					}
					.bookTitle {
						width: 100%;
						font-size: 27px;
						letter-spacing: 2px;
						/* 显示2行,多的文字隐藏 */
						overflow:hidden; 
						text-overflow:ellipsis;
						display:-webkit-box; 
						-webkit-box-orient:vertical;
						-webkit-line-clamp:2;
					}
				}
				.bookBox:nth-child(3n-1) {
					margin-left: 31px;
					margin-right: 31px;
				}
			}
			.more {
				width: 100%;
				line-height: 80px;
				background-color: #f5f5f5;
				border-top: 1px solid #8d8d8d;
				text-align: center;
				font-size: 36px;
				color: #8d8d8d;
				.moreIcon {
					width: 32px;
					height: 32px;
				}
			}
		}
	}
</style>